<template>
  <div>
    <el-container class="s">
      <el-container>
        <el-aside width="200px" class="CD">
          <el-row class="tac">
            <el-col>
              <el-menu class="title">
                <span>唯 智</span>
              </el-menu>
              <!-- <h2 class="mb-2">唯  智</h2> -->
              <!-- <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              >
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon>
                      <Menu />
                    </el-icon>
                    <span>工作台</span>
                  </template>
                  <el-menu-item index="1-1">
                    <el-icon>
                      <TrendCharts />
                    </el-icon>
                    工作台
                  </el-menu-item>
                </el-sub-menu>
              </el-menu> -->
              <el-menu
                background-color="#2F4050"
                text-color="#fff"
                active-text-color="#ffd04b"
                :unique-opened="true"
                :collapse="isz"
                :collapse-transition="false"
                :router="true"
              >
                <!-- <div class="toggle-button" @click="toggle()">|||</div> -->
                <!--一级菜单-->

                <el-sub-menu
                  :index="item.id"
                  v-for="item in list"
                  :key="item.id"
                >
                  <template #title>
                    <!-- 图标 -->
                    <el-icon>
                      <component :is="item.icon"></component>
                    </el-icon>
                    <!-- 文本 -->
                    <span>{{ item.authName }}</span>
                  </template>
                  <!--二级菜单-->
                  <el-menu-item
                    :index="item1.path + ''"
                    v-for="item1 in item.children"
                    :key="item1.id"
                  >
                    <template #title>
                      <!-- 图标 -->
                      <el-icon>
                        <component :is="item1.icon"></component>
                      </el-icon>
                      <!-- 文本 -->
                      <span @click="spath(item1.path)">{{
                        item1.authName
                      }}</span>
                    </template>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-container>
          <el-header>
            <div style="float:right;">
              <div style="line-height:50px;color:#eee;">欢迎您：<a style="color:#eee" href="#">{{ name }}</a> <a href="#" style="margin-left:30px;color:#eee">个人资料</a> <el-button type="success" link style="margin-left:30px;color:#eee">退出</el-button></div>
            </div>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "axios";

// import {
//     Document,
//     Menu as IconMenu,
//     Location,
//     Setting,
// } from '@element-plus/icons-vue'
export default {
  setup() {
    let name = ref("");
    let router = useRouter();
    //是否折叠
    let isz = ref(false);
    //被激活的链接地址
    let apath = ref("");
    //权限数据
    let list = ref([]);
    function fill() {
      axios({
        method: "get",
        url: "http://localhost:5261/api/Welcome/Welcome",
        headers: {
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == -1) {
          sessionStorage.setItem("token", "");
          ElMessage.error("异常错误!!!");
          router.push("/Login");
        } else {
          ElMessage.success("登录成功");
        }
      });
    }

    function fill2() {
      var emp = sessionStorage.getItem("empId");
      name.value = sessionStorage.getItem("empname");
      console.log(emp);
      axios
        .get("http://localhost:5261/api/Welcome/GetTrees", {
          params: {
            id: emp,
          },
          headers: {
            Authorization: "Bearer " + sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          list.value = res.data;
          console.log(list.value);
        })
        .catch((err) => console.log(err));
    }

    function toggle() {
      isz.value = !isz.value;
    }

    function spath(s) {
      apath.value = s;
      console.log(s);
    }

    fill();
    fill2();

    function handleOpen() {}

    function handleClose() {}

    return {
      fill,
      name,
      router,
      handleOpen,
      handleClose,
      toggle,
      isz,
      apath,
      list,
      spath,
    };
  },
};
</script>

<style scoped>
.mb-2 {
  background-color: #367fa9;
}

.el-aside {
  background-color: #2f4050;
  text-align: center;
  /* line-height: 200px; */
}

.el-main {
  background-color: #f4f8fe;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}

.s {
  height: 98vh;
}

.title {
  background-color: #367fa9;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}
header {
  background-color: #3c8dbc;
  height: 51px;
  position: relative;
  left: -1px;
}
</style>
